<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-900 via-gray-900 to-black flex items-center justify-center">
    <!-- 背景装饰 -->
    <div class="absolute inset-0 overflow-hidden">
      <div
        class="absolute -top-1/2 -left-1/2 w-full h-full bg-gradient-to-br from-yellow-500/10 to-orange-500/10 rounded-full blur-3xl"
      ></div>
      <div
        class="absolute -bottom-1/2 -right-1/2 w-full h-full bg-gradient-to-tl from-orange-500/10 to-amber-600/10 rounded-full blur-3xl"
      ></div>
    </div>

    <div class="relative w-full max-w-md mx-auto px-6">
      <!-- Logo区域 -->
      <div class="fixed top-8 left-8 z-10">
        <Logo />
      </div>

      <!-- 登录表单 -->
      <div class="bg-white/5 backdrop-blur-lg border border-white/10 rounded-2xl p-6 shadow-2xl">
        <h2 class="text-2xl font-bold text-white text-center mb-6">欢迎回来</h2>

        <form @submit.prevent="handleLogin" class="space-y-4">
          <!-- 邮箱 -->
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-1"> 邮箱 </label>
            <div class="relative">
              <input
                v-model="loginForm.userAccount"
                type="text"
                required
                placeholder="请输入邮箱"
                maxlength="50"
                class="w-full px-4 py-2.5 bg-white/5 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-yellow-500 focus:ring-1 focus:ring-yellow-500 transition-colors"
              />
              <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                <i class="i-carbon-user text-gray-400"></i>
              </div>
            </div>
          </div>

          <!-- 密码 -->
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-1"> 密码 </label>
            <div class="relative">
              <input
                v-model="loginForm.password"
                :type="showPassword ? 'text' : 'password'"
                required
                placeholder="请输入密码"
                maxlength="50"
                class="w-full px-4 py-2.5 bg-white/5 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-yellow-500 focus:ring-1 focus:ring-yellow-500 transition-colors pr-10"
              />
              <button
                type="button"
                @click="showPassword = !showPassword"
                class="bg-white/5 absolute inset-y-0 right-0 px-2 flex items-center"
              >
                <img v-if="showPassword" src="/assets/image/open-eyes.svg" class="w-4 h-4" />
                <img v-else src="/assets/image/close-eyes.svg" class="w-4 h-4" />
              </button>
            </div>
          </div>

          <!-- 记住密码 & 忘记密码 -->
          <div class="flex items-center justify-end pt-2">
            <a href="/forget-password" class="text-sm text-yellow-400 hover:text-yellow-300 transition-colors"> 忘记密码？ </a>
          </div>

          <!-- 登录按钮 -->
          <button
            type="submit"
            :disabled="isLoading"
            class="cursor-pointer w-full py-2.5 px-4 bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700 text-white font-semibold rounded-lg transition-all duration-300 transform disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
          >
            <span v-if="isLoading" class="flex items-center justify-center">
              <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
              登录中...
            </span>
            <span v-else>登录</span>
          </button>
        </form>

        <!-- 注册链接 -->
        <div class="mt-6 text-center">
          <span class="text-gray-400 text-sm">还没有账户？</span>
          <NuxtLink to="/register" class="text-yellow-400 hover:text-yellow-300 font-medium ml-1 transition-colors text-sm">
            立即注册
          </NuxtLink>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="mt-6 text-center text-xs text-gray-500">
        <p>
          登录即表示同意我们的
          <a href="/user-agreement" class="text-yellow-400 hover:text-yellow-300">用户协议</a>
          和
          <a href="/privacy-policy" class="text-yellow-400 hover:text-yellow-300">隐私政策</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { queryLogin } from '~/apis/auth';

// SEO配置
useSEO({
  title: '登录 - 球球助手',
  description: '登录球球助手账户，查询足球比赛数据，享受专业的数据查询服务',
  keywords: '登录,用户登录,球球助手,足球数据,数据查询',
});

// 响应式数据
const userStore = useUserStore();
const showPassword = ref(false);
const isLoading = ref(false);

const loginForm = reactive({
  userAccount: '',
  password: '',
});

// 登录处理
const handleLogin = async () => {
  isLoading.value = true;
  const res = await queryLogin(loginForm).finally(() => (isLoading.value = false));
  isLoading.value = true;
  await userStore.onLogin(res.data).finally(() => (isLoading.value = false));
  navigateTo('/');
};
definePageMeta({ layout: 'auth' });

onMounted(() => {
  if (userStore.isLoggedIn) navigateTo('/');
});
</script>
